<template>
  <div id="app">
    <v-header :seller="seller"></v-header>
    <div class="tab border-1px">
      <div class="tab-item">
        <router-link :to="{ path: '/goods' }">
          商品
        </router-link>
      </div>
      <div class="tab-item">
        <router-link :to="{path: '/rating' }">
          评论
        </router-link>
      </div>
      <div class="tab-item">
        <router-link :to="{path: '/seller' }">
          商家
        </router-link>
      </div>
    </div>

      <div class="content">
        <keep-alive>
         <router-view :seller="seller"></router-view>
        </keep-alive>
      </div>

  </div>
</template>

<script type="text/ecmascript-6">
import header from './components/header/header.vue'

export default {
  data () {
    return {
      seller: {},
      transitionName: 'slide-left'
    }
  },
  created () {
    this.$http.get('static/data.json').then((response) => {
      response = response.body
      this.seller = response.seller
    })
  },
  components: {
    'v-header': header
  },
  watch: {
    '$route' (to, from) {
      const toDepth = to.path.split('/').length
      const fromDepth = from.path.split('/').length
      this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import 'common/stylus/mixin.styl'
#app
  .tab
    display: flex
    display: -webkit-box
    width: 100%
    height: 40px
    line-height: 40px
    border-1px(rgba(77,17,27,0.1))
    .tab-item
      flex: 1
      -webkit-box-flex: 1;
      text-align: center
      &>a
        font-size: 14px
        color: rgb(77,85,93)
        &.active
          color: rgb(240,20,20)
  .slide-right-enter-active, .slide-right-leave-active,.slide-left-enter-active, .slide-left-leave-active
    transition: all .2s linear
    -webkit-transition: all .2s linear
  .slide-right-enter, .slide-right-leave-active
    transform: translate3d(100%, 0, 0)
    -webkit-transform: translate3d(100%, 0, 0)
  .slide-left-enter, .slide-left-leave-active
    transform: translate3d(-100%, 0, 0)
    -webkit-transform: translate3d(-100%, 0, 0)
</style>
